<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web 前端接入示例</title>
    <!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会影响程序的正常使用。 -->
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    </head>
        <body>
            <!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
            <!--id :            (不可变) 元素的 ID, 值必须是 "TencentCaptcha"-->
            <!--data-appid :    (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
            <!--data-cbfn :     (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
            <!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
            <button id="TencentCaptcha" data-appid="2037762575" data-cbfn="callbackName" data-biz-state="data-biz-state" type="button">验证</button>
        </body>
        <script>
            // 回调函数需要放在全局对象window下
            window.callbackName = function (res) {
                // 返回结果
                // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
                // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
                // CaptchaAppId       String    验证码应用ID。
                // bizState    Any       自定义透传参数。
                // randstr     String    本次验证的随机串，请求后台接口时需带上。
                console.log("callback:", res);
                // res（用户主动关闭验证码）= {ret: 2, ticket: null}
                // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
                if (res.ret === 0) {
                // 复制结果至剪切板
                let str = `【randstr】->【${res.randstr}】      【ticket】->【${res.ticket}】`
                let ipt = document.createElement("input");
                ipt.value = str;
                document.body.appendChild(ipt);
                ipt.select();
                document.execCommand("Copy");
                document.body.removeChild(ipt);
                alert("1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。2. 打开浏览器控制台，查看完整返回结果。");
                }
            }
            </script>
</html>